<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: 'echarts',
        props: ['id', 'scope', 'date'],
        mounted () {
            this.renderChart();
        },
        watch: {
            "scope": function () {
                this.renderChart();
            },
            "date": function () {
                this.renderChart();
            }
        },
        methods: {
            renderChart () {
                const date = this.date ? this.date : "2025-01";
                const year = date.split("-")[0];
                const month = date.split("-")[1];

                const monthsArray = [];

                // 遍历并获取前7个月的年月
                for (let i = 0; i < 7; i++) {
                    let yy = year;
                    let mm = month - i;

                    // 处理跨年情况
                    if (mm <= 0) {
                        mm += 12;
                        yy -= 1;
                    }

                    // 格式化并存储年月
                    const formattedMonth = `${String(yy).slice(-2)}-${String(mm).padStart(2, '0')}`;
                    monthsArray.push(formattedMonth);
                }

                const option_month = {
                    title: {
                        text: `单位：${this.id == 'echarts2' ? '%' : 'H'}`,
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为白色
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '3%',
                        bottom: '14%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    legend: {
                        data: ['XX1电站', 'XX2电站', 'XX3电站'],
                        top: 20, // 图例放在顶部
                        right: 20,
                        textStyle: {
                            fontSize: 10,
                            color: '#fff', // 字体颜色为白色
                        },
                        itemWidth: 16, // 调整颜色块的宽度
                        itemHeight: 10, // 调整颜色块的高度
                        itemGap: 10, // 调整颜色块之间的间距
                    },
                    xAxis: {
                        type: 'category',
                        data: monthsArray.reverse(),
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'bar',
                            data: [250, 200, 150, 100, 50, 320, 180],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#6C63F0' }, // 起始颜色
                                    { offset: 1, color: 'rgba(108, 99, 240, 0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: 'XX2电站',
                            type: 'bar',
                            data: [200, 150, 100, 50, 130, 110, 90],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF595F' }, // 起始颜色
                                    { offset: 1, color: 'rgba(255,89,95,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: 'XX3电站',
                            type: 'bar',
                            data: [150, 100, 50, 200, 130, 90, 120],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFCA18' }, // 起始颜色
                                    { offset: 1, color: 'rgba(255,202,24,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                    ],
                };

                const option_year = {
                    title: {
                        text: `单位：${this.id == 'echarts2' ? '%' : 'H'}`,
                        left: 'left', // 标题放在左上角
                        top: 20, // 距离顶部 10px
                        textStyle: {
                            fontSize: 12,
                            color: '#fff', // 字体颜色为白色
                        },
                    },
                    grid: {
                        left: '2%',
                        right: '3%',
                        bottom: '14%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        },
                    },
                    legend: {
                        data: ['XX1电站', 'XX2电站', 'XX3电站'],
                        top: 20, // 图例放在顶部
                        right: 20,
                        textStyle: {
                            fontSize: 10,
                            color: '#fff', // 字体颜色为白色
                        },
                        itemWidth: 16, // 调整颜色块的宽度
                        itemHeight: 10, // 调整颜色块的高度
                        itemGap: 10, // 调整颜色块之间的间距
                    },
                    xAxis: {
                        type: 'category',
                        data: [year - 4, year - 3, year - 2, year - 1, year],
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#666',
                            },
                        },
                        axisLabel: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    series: [
                        {
                            name: 'XX1电站',
                            type: 'bar',
                            data: [750, 1200, 1150, 1000, 500],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#6C63F0' }, // 起始颜色
                                    { offset: 1, color: 'rgba(108, 99, 240, 0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: 'XX2电站',
                            type: 'bar',
                            data: [1200, 1500, 1100, 1150, 400],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FF595F' }, // 起始颜色
                                    { offset: 1, color: 'rgba(255,89,95,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                        {
                            name: 'XX3电站',
                            type: 'bar',
                            data: [950, 1100, 1150, 980, 430],
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#FFCA18' }, // 起始颜色
                                    { offset: 1, color: 'rgba(255,202,24,0.2)' }, // 结束颜色
                                ]),
                            },
                        },
                    ],
                };

                var myChart = echarts.init(document.getElementById(this.id))
                myChart.clear();
                if (this.scope == "year") {
                    myChart.setOption(option_year);
                } else {
                    myChart.setOption(option_month);
                }
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            },
        },
    };
</script>

<style scoped>
    .chart {
        width: 100%;
        height: 100%;
    }
</style>